﻿@page "/components/chipset"

<DocsPage>
    <DocsPageHeader Title="Chip Set" Component="@nameof(MudChipSet<T>)">
        <Description><br />See also: <MudLink Href="/components/chips">Chip</MudLink></Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Single selection">
                <Description>
                    Chipset will maintain a selection of chips for you. By default, the <CodeInline>SelectionMode</CodeInline> is <CodeInline>SelectionMode.SingleSelection</CodeInline>.
                    In this mode you can choose a single value. Similar to a radio button you can switch the value by clicking on a different chip but it is not possible to unselect the selected choice by
                    clicking a second time. <CodeInline>SelectionMode="SelectionMode.ToggleSelection"</CodeInline> is a single selection which also allows to unselect the selected chip.
                    To get or set the selected value use <CodeInline>@@bind-SelectedValue</CodeInline>.

                    <MudAlert Severity="Severity.Info" Class="my-3">
                        Note: If you use the toggle selection and unselect the selected item the <CodeInline>SelectedValue</CodeInline> will become <CodeInline>default(T)</CodeInline>. If that
                        collides with a valid choice (i.e. 0 for type <CodeInline>int</CodeInline>) you should use a nullable type (i.e. <CodeInline>T="int?"</CodeInline>).
                    </MudAlert>

                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetBasicExample)" Block="true">
                <ChipSetBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiselection">
                <Description>
                    When you set <CodeInline>SelectionMode="MultiSelection"</CodeInline> the chip set will maintain a selection of multiple values. To utilize or manipulate the selection use
                    <CodeInline>@@bind-SelectedValues</CodeInline> (with an 's' at the end).
                    No matter the selection mode, you can set <CodeInline>CheckMark="true"</CodeInline> if you want the selected chips to display a check mark.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetMultiselectionExample)" Block="true">
                <ChipSetMultiselectionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Adding and removing chips">
                <Description>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetAddRemoveExample)" Block="true">
                <ChipSetAddRemoveExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Default chips">
                <Description>
                    Chips which have<CodeInline>Default="true"</CodeInline> will be initially selected.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetDefaultChipsExample)" Block="true">
                <ChipSetDefaultChipsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding chips in a selection">
                <Description>
                    You can bind a Chip's <CodeInline>@nameof(MudChip<T>.Selected)</CodeInline> parameter to manipulate the selection.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetChipBindingExample)" Block="true">
                <ChipSetChipBindingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Variants">
                <Description>
                    The chip's look different when selected depending on its initial <CodeInline>Variant</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetVariantsExample)" Block="true">
                <ChipSetVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Selected Color">
                <Description>
                    The chip's selected color can be changed with the <CodeInline>SelectedColor</CodeInline> property, by default it has the same color as the chip.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetSelectedColorExample)" Block="true">
                <ChipSetSelectedColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Accessibility">
                <Description>
                    <MudText Class="mb-2">
                        A <CodeInline>MudChip</CodeInline> accepts the following shortcuts:
                    </MudText>
                    <MudSimpleTable Outlined="true"
                                    Hover="true">
                        <thead>
                        <tr>
                            <th>Keys</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <CodeInline>Space</CodeInline>,
                                <CodeInline>Enter</CodeInline>,
                                <CodeInline>NumpadEnter</CodeInline></td>
                            <td>Click, select, or toggle the state of the currently focused chip</td>
                        </tr>
                        <tr>
                            <td>
                                <CodeInline>Backspace</CodeInline>,
                                <CodeInline>Delete</CodeInline></td>
                            <td>Close the currently focused chip if it is closable</td>
                        </tr>
                        </tbody>
                    </MudSimpleTable>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ChipSetForKeyboardNavigationExample)">
                <ChipSetForKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>